<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
    <title></title>
    <link rel="stylesheet" type="text/css" href="dist/turntable.css">
</head>
<style>
[v-cloak] {
    display: none;
}
</style>

<body>
    <div id="app" v-cloak>
        <Turntable ref="myRotate" :styles="styles" @get-prize-info="getPrizeInfo" />
    </div>
</body>
<script src="https://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.8/dist/vue.js"></script>
<script src="./dist/turntable.umd.js"></script>
<script>
const { ref } = Vue

new Vue({
    el: '#app',
    setup() {
        let styles = {
            r1: {
                w: "16rem",
                h: "16rem",
                img: "./img/r1.png",
            },
            r2: {
                w: "15rem",
                h: "15rem",
                img: "./img/r2.png",
            },
            r3: {
                w: "3.6rem",
                h: "4.225rem",
                img: "./img/r3.png",
            },
        }
        const myRotate = ref(null);

        function getPrizeInfo() {
            //ajax
            let data = "5";
            let result;
            switch (data) {
                case "1": //这里传奖品名称 或者 id 随意配置
                    result = { deg: 0, txt: "100元" };
                    break;
                case "2":
                    result = { deg: 60, txt: "机油" };
                    break;
                case "3":
                    result = { deg: 120, txt: "8折工时券" };
                    break;
                case "4":
                    result = { deg: 180, txt: "空气滤芯1只" };
                    break;
                case "5":
                    result = { deg: 240, txt: "机油滤清器1只" };
                    break;
                default:
                    result = { deg: 30, txt: "很遗憾，你未中奖" };
                    break;
            }

            myRotate.value.startRotate(result, function(res) {
                console.log(res.txt);
            });
        }
        return { styles, getPrizeInfo,myRotate }
    },
    // data: {
    //     styles: {
    //         r1: {
    //             w: "16rem",
    //             h: "16rem",
    //             img: "./img/r1.png",
    //         },
    //         r2: {
    //             w: "15rem",
    //             h: "15rem",
    //             img: "./img/r2.png",
    //         },
    //         r3: {
    //             w: "3.6rem",
    //             h: "4.225rem",
    //             img: "./img/r3.png",
    //         },
    //     }
    // },
    // methods: {
    //     getPrizeInfo() {
    //         let data = "5";
    //         let result;
    //         switch (data) {
    //             case "1": //这里传奖品名称 或者 id 随意配置
    //                 result = { deg: 0, txt: "100元" };
    //                 break;
    //             case "2":
    //                 result = { deg: 60, txt: "机油" };
    //                 break;
    //             case "3":
    //                 result = { deg: 120, txt: "8折工时券" };
    //                 break;
    //             case "4":
    //                 result = { deg: 180, txt: "空气滤芯1只" };
    //                 break;
    //             case "5":
    //                 result = { deg: 240, txt: "机油滤清器1只" };
    //                 break;
    //             default:
    //                 result = { deg: 30, txt: "很遗憾，你未中奖" };
    //                 break;
    //         }

    //         this.$refs.myRotate.startRotate(result, function(res) {
    //             console.log(res.txt);
    //         });
    //     }
    // }
})
</script>

</html>